<script setup>
import { onMounted, ref,getCurrentInstance  } from 'vue';
import axios from 'axios';
import BookList from "@/components/BookList.vue";

const typeList = ref([]); // 书籍分类列表
const typePage = ref([]); // 按类型查询页面对象
const activeName = ref("hotSelling");

// 热销榜页面对象
const topPage = ref({});
// 查询参数
const param = ref({
  pageNum: 1,
  pageSize: 12
});

//查询排名的书籍
const initTop = async () => {
  try {
    const resp = await axios.post('/book/top', param.value);
    topPage.value = resp.data;
  } catch (e) {
    console.error('Error fetching book types:', error);
  }
};
// 处理分页组件的切换
const handleCurrentPage = (val) => {
  param.value.pageNum = val;
  initTop();
};
//处理按分类查询分页
const handleTypeCurrentPage = (val) => {
  param.value.pageNum = val;
  findByType();
};
//处理分类查询数据
const findByType = async ()=>{
  console.log(param.value)
  const resp = await axios.post('/book/findByType', param.value);
  typePage.value = resp.data
}
//处理标签切换的问题
const handleTabChange = (tab)=>{
  // 打印整个 tab 对象
  console.log("Tab 对象：", tab);
  // 获取代理对象中的数据
  const typeId = tab.props.name;  // 对应于 type.id
  //这个tab.props.name就是typeId
  console.log("标签名：", typeId);
  // 跳转到第1页去
  param.pageNum = 1;
  //根据标签名判断调用哪个方法
  switch (tab.props.name) {
    case 'hotSelling':
      initTop();
      break;
    default:
      // 转成整数再赋值给typeId
      param.value.typeId = parseInt(tab.props.name);
      console.log(param)
      findByType();
      break;
  }
}

// 初始化书籍类型
// async 关键字意味着函数内部会有异步操作，通常与 await 配合使用，以处理异步任务。
const initBookType = async () => {
  try {
    // await 关键字会等待这个请求完成，并将其返回的响应对象（通常是一个包含响应数据的对象）赋值给 resp 变量。
    const resp = await axios.get('/bookType/findAll');
    typeList.value = resp.data; // 获取响应数据
  } catch (error) {
    console.error('Error fetching book types:', error);
  }
}

onMounted(() => {
  // 调用初始化书籍类型方法
  initBookType();
  //查询排名的书籍
  initTop();
});





</script>

<template>
  <div>
    <!-- 导航标签页  -->
    <el-tabs type="border-card" @tab-click="handleTabChange" v-model="activeName">
      <!-- 第1个标签页，默认显示的 -->
      <el-tab-pane  name="hotSelling">`
        <template #label>
          <el-icon><Document /></el-icon>热销榜
        </template>

        <book-list :book-list="topPage.records"
                   :current-page="param.pageNum"
                   :page-size="param.pageSize"
                   :total-items="topPage.total"
                   @change-page="handleCurrentPage">
        </book-list>

      </el-tab-pane>
      <!-- 从数据库表中查询出来并且显示 -->
      <el-tab-pane v-for="type in typeList" :key="type.id" :label="type.name" :name="String(type.id)" >
        <template #label>
          <el-icon><Notebook /></el-icon>{{ type.name }}
        </template>

        <!-- 按类型查询书籍 -->
        <book-list :book-list="typePage.records"
                   :current-page="param.pageNum"
                   :page-size="param.pageSize"
                   :total-items="typePage.total"
                   @change-page="handleTypeCurrentPage">
        </book-list>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>

</style>
